<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-col :span="12">
          <el-form-item label="业务类型" prop="businessName">
            <el-input
              v-model.number="formData.businessName"
              placeholder="暂无"
              clearable
              :disabled="disabled"
              :style="{ width: 'calc(100%)' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠券名称" prop="couponName">
            <el-input
              v-model.number="formData.couponName"
              placeholder="暂无"
              clearable
              :disabled="disabled"
              :style="{ width: 'calc(100%)' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠券状态" prop="couponStatus">
            <el-select
              v-model.number="formData.couponStatus"
              :disabled="disabled"
              placeholder="暂无"
              clearable
              :style="{ width: 'calc(100%)' }"
            >
              <el-option
                v-for="item in dict.type.coupon_status"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="活动数据" name="active">
              <el-row :gutter="15">
                <el-col :span="4">
                  <p>总库存</p>
                  <p>{{ formData.sendTotal }}</p>
                </el-col>
                <el-col :span="4">
                  <p>已发放</p>
                  <p>{{ formData.issued }}</p>
                </el-col>
                <el-col :span="4">
                  <p>未使用</p>
                  <p>{{ formData.unused }}</p>
                </el-col>
                <el-col :span="4">
                  <p>已使用</p>
                  <p>{{ formData.hasBeenUsed }}</p>
                </el-col>
                <el-col :span="4">
                  <p>已过期</p>
                  <p>{{ formData.overdue }}</p>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="24">
          <el-tabs
            v-model="showList"
            type="border-card"
            style="margin: 20px 0px"
          >
            <el-tab-pane
              label="客户领取优惠券记录"
              name="businessMemberDataList"
            >
              <el-form
                :model="queryParams"
                ref="queryParamsForm"
                :inline="true"
                label-width="0px"
              >
                <el-form-item>
                  <el-input
                    v-model="queryParams.param"
                    style="width: 300px"
                    placeholder="请输入用户名称/客户联系方式"
                    clearable
                    size="small"
                    @keyup.enter.native="getList"
                  />
                </el-form-item>
                <!-- <el-form-item label="" prop="memberType">
                  <el-select
                    v-model.number="queryParams.memberType"
                    placeholder="请选择客户类型"
                    @change="getList"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="item in dict.type.coupon_memberType"
                      :key="item.value"
                      :label="item.label"
                      :value="parseInt(item.value)"
                    />
                  </el-select>
                </el-form-item> -->
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="getList"
                    >查询</el-button
                  >
                  <el-button icon="el-icon-refresh" size="mini" @click="reset"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
              <el-table v-loading="purchase.loading" :data="purchase.list">
                <el-table-column
                  min-width="140"
                  label="用户名称"
                  align="center"
                  prop="memberName"
                />
                <el-table-column
                  min-width="140"
                  label="微信图像"
                  align="center"
                  prop="vxUrl"
                >
                  <template slot-scope="scope">
                    <el-image
                      style="width: 48px; height: 48px"
                      :src="scope.row.vxUrl"
                      fit="fill"
                    ></el-image>
                  </template>
                </el-table-column>
                <el-table-column
                  min-width="80"
                  label="微信名称"
                  align="center"
                  prop="vxName"
                />
                <el-table-column
                  min-width="140"
                  label="客户联系方式"
                  align="center"
                  prop="memberPhone"
                />
                <el-table-column
                  min-width="140"
                  label="发放人"
                  align="center"
                  prop="userName"
                />
                <el-table-column
                  min-width="160"
                  label="领取时间"
                  align="center"
                  prop="distributedTime"
                />
                <el-table-column
                  min-width="140"
                  label="客户优惠券状态"
                  align="center"
                  prop="memberCouponStatus"
                >
                  <template slot-scope="scope">
                    {{
                      typeFilter(
                        dict.type.coupon_memberCouponStatus,
                        scope.row.memberCouponStatus
                      )
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  min-width="140"
                  label="使用时间"
                  align="center"
                  prop="createTime"
                  sortable
                />
              </el-table>
              <pagination
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="24">
          <el-form-item
            size="large"
            label-width="0"
            :style="{ textAlign: 'center' }"
          >
            <el-button @click="goBack">取消</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
import {
  businessDataInfo,
  businessMemberDataList,
} from '@/api/coupon/business.js'
import { businessList } from '@/api/coupon/manage.js'
export default {
  dicts: ['coupon_status', 'coupon_memberCouponStatus'],
  data() {
    return {
      businessOptions: [],
      disabled: true,
      activeName: 'active',
      showList: 'businessMemberDataList',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        businessId: '',
        param: '',
        memberType: null,
      },
      total: 1,
      purchase: {
        list: [],
        loading: false,
      },
      formData: {
        couponStatus: null,
        businessName: '',
        businessNo: '',
        couponName: '',
        sendTotal: 50,
        issued: null,
        unused: null,
        hasBeenUsed: null,
        overdue: null,
      },
      rules: {
        businessName: [
          {
            required: true,
            message: '请输入业务类型',
            trigger: 'blur',
          },
        ],
        couponName: [
          {
            required: true,
            message: '请输入优惠券名称',
            trigger: 'blur',
          },
        ],
        couponStatus: [
          {
            required: true,
            message: '请输入优惠券状态',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {
    Promise.all([this.getBusinessDataInfo()]).then(([res]) => {
      this.getBusinessList()
    })
  },
  methods: {
    typeFilter(type, val) {
      return type.filter((item) => {
        return val == item.value
      })[0].label
    },
    getBusinessDataInfo() {
      businessDataInfo({ id: this.$route.params.id }).then((res) => {
        this.formData = res.data
        this.queryParams.businessId = res.data.businessId
        this.getList()
      })
    },
    getBusinessList() {
      businessList().then((res) => {
        this.businessOptions = []
        res.data.map((item, index) => {
          item['type'] = item.id == this.formData.businessNo ? 'primary' : ''
          this.businessOptions.push(item)
        })
      })
    },
    /** 查询租户管理列表 */
    getList() {
      this.purchase.loading = true
      businessMemberDataList(this.queryParams).then((response) => {
        this.purchase.list = response.rows
        this.total = response.total
        this.purchase.loading = false
      })
    },
    // 表单重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        param: '',
        businessId: this.queryParams.businessId,
        memberType: null,
      }
      this.getList()
    },
    goBack() {
      this.$router.go(-1) // 返回
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      )
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      )
    },
  },
}
</script>
